<template>
  <div class="bottom-nav">
    <ul class="nav-list">
      <li 
        v-for="(item, index) in menuList" 
        :key="index" 
        class="nav-item"
      >
        <router-link 
          :to="item.path" 
          class="nav-link"
          :class="{ active: isActive(item.path) }"
        >
          <svg :class="{'active': isActive(item.path)}" width="24" height="24" viewBox="0 0 24 24">
            <use :xlink:href="item.icon"></use>
          </svg>
          <span>{{ item.label }}</span>
        </router-link>
      </li>
      <!-- 登录项也添加图标 -->
      <li class="nav-item login-item">
        <router-link to="/Login" class="nav-link login-link">
          <svg :class="{'active': isActive('/Login')}" width="24" height="24" viewBox="0 0 24 24">
            <use xlink:href="#login-icon"></use>
          </svg>
          <span>{{ loginLabel }}</span>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

// 导航菜单配置（每个项都添加图标引用）
const menuList = [
  { path: '/yonghu/home', label: '首页', icon: '#home-icon' },
  { path: '/yonghu/online-registration', label: '在线挂号', icon: '#registration-icon' },
  { path: '/yonghu/my-appointments', label: '我的预约', icon: '#appointment-icon' },
  { path: '/yonghu/hospital-info', label: '医院信息', icon: '#hospital-icon' },
  { path: '/yonghu/my', label: '我的', icon: '#my-icon' }
];

// 登录项标签（可动态配置）
const loginLabel = ref('登录/注册');

// 检查当前路由是否激活
const isActive = (path) => {
  return router.currentRoute.value.path === path;
};
</script>

<style scoped>
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
  background-color: #fff;
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.1);
  padding: 8px 0;
}

.nav-list {
  display: flex;
  justify-content: space-around;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20%;
  padding: 8px 0;
}

.nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #666;
  transition: color 0.3s ease;
}

.nav-link.active {
  color: #165DFF;
}

.nav-link svg {
  width: 24px;
  height: 24px;
  margin-bottom: 4px;
  transition: transform 0.2s ease;
}

.nav-link.active svg {
  fill: #165DFF;
  transform: scale(1.1);
}

.nav-link span {
  font-size: 12px;
}

.login-item {
  width: 20%;
}

.login-link {
  color: #165DFF;
}

.login-link svg {
  fill: #165DFF;
}
</style>